<template>
  <div class="search">
    <div class="header">
      <div class="left">
        <router-link tag="a" to="/home">
          <img src="../assets/img/fanhui.png" alt="" />
        </router-link>
      </div>
      <div class="mid">搜索</div>
      <div class="right"></div>
    </div>

    <div class="seach">
      <div class="lf">
        <select>
          <option>门户</option>
          <option>帖子</option>
          <option>日志</option>
          <option>相册</option>
          <option>用户</option>
        </select>
      </div>
      <div class="md">
        <input type="text" placeholder="请输入搜索内容..." v-model="keyword" @keyup.enter="search"/>
      </div>
      <div class="rg" @click="search">搜索</div>
    </div>

    <div class="box">
      <div class="word">热门搜索</div>

      <div class="content">
        <div class="items">
          <a
            v-for="(item, index) in searchList"
            :key="index"
            :style="{ background: item.bg }"
            >{{ item.title }}</a
          >
        </div>
      </div>
    </div>

    <div class="main" v-if="Listsdata">
      <router-link
        tag="div"
        :to="'/details?id=' + item.id"
        class="items"
        v-for="(item, index) in Listsdata"
        :key="index"
      >
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="content">
          <p>{{ item.title }}</p>
          <span>原创 | {{ item.times }}</span>
          <i>{{ item.num }}阅读</i>
        </div>
      </router-link>
    </div>

    <div class="bottom" v-show="flag">
      <img src="../assets/img/huifu.png" alt="" />
      <p>对不起，没有找到匹配结果。</p>
    </div>
  </div>
</template>

<script>
import { getmainList } from "../api/home";
import { getsearchList } from "../api/search";
export default {
  data() {
    return {
      searchList: null,
      Lists: null,
      Listsdata: [],
      keyword: "",
      flag: false,
    };
  },
  methods: {
    //搜索
    search() {
      this.Listsdata = [];
      this.Lists.forEach((item) => {
        if (item.title.indexOf(this.keyword) != -1) {
          this.Listsdata.push(item);
        } else {
          this.flag = false;
        }
      });
      if(this.Listsdata.length==0){
        this.flag = true;
      }
    },
  },

  created() {
    getmainList().then((data) => {
      this.Lists = data.mainList;
    });
    getsearchList().then((data) => {
      this.searchList = data.searchList;
    });
  },
};
</script>

<style lang="scss" scoped>
.search {
  .header {
    width: 100%;
    height: 48px;
    background: #53bcf5;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    .left {
      width: 20px;
      height: 20px;
      margin-left: 10px;
      a {
        img {
          width: 100%;
        }
      }
    }
    .mid {
      flex: 1;
      text-align: center;
      font-size: 18px;
      color: #fff;
    }
  }
  .header .left,
  .header .right {
    width: 20px;
    text-align: center;
  }
  .seach {
    margin-top: 48px;
    display: flex;
    padding: 12px;
    .lf {
      background: #f8f8f8;
      padding: 6px;
      select {
        border: none;
        background: #f8f8f8;
        color: #999;
        border-right: 1px solid #efefef;
      }
    }
    .md {
      background: #f8f8f8;
      flex: 1;
      padding: 6px;
      input {
        width: 100%;
        outline: none;
        border: none;
      }
    }
    .rg {
      background: #99db5e;
      padding: 6px 6px;
      color: #fff;
      margin-left: 10px;
      font-size: 14px;
    }
  }
  .word {
    padding-bottom: 10px;
    margin: 0 10px;
    border-bottom: 1px solid #efefef;
    color: #999;
    font-size: 14px;
  }
  .content {
    display: flex;
    padding: 12px;
    flex-direction: column;
    .items {
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      a {
        padding: 4px;
        width: 20%;
        border-radius: 20px;
        margin: 5px 4px;
        font-size: 14px;
        color: #777;
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    img {
      width: 50px;
      height: 50px;
      background-size: 100%;
    }
    p {
      color: #bbbbbb;
      font-size: 14px;
      margin-top: 20px;
    }
  }
  .main {
    display: flex;
    flex-direction: column;
    .items {
      width: 96.5%;
      margin: 0 auto;
      display: flex;
      margin: 12px;
      // padding-bottom: 12px;
      border-bottom: 2px solid #f1f1f1;
      .img {
        width: 105px;
        height: 85px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: 15px;
        p {
          font-size: 17px;
          font-weight: 400;
          // margin-bottom: 26px;
        }
        span {
          color: #bbb;
          font-size: 12px;
        }
        i {
          color: #bbb;
          font-size: 12px;
          font-style: normal;
        }
      }
    }
  }
}
</style>
